<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>订单详情</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
  <script src="/js/common.js"></script>
</head>
<body>
<div id="root">
  <table cellpadding="0" cellspacing="0" border="1" width="700px" v-if="order">
    <thead>
    <tr>
      <th>商品名称</th>
      <th>订单价格</th>
      <th>下单时间</th>
      <th>订单状态</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>{{order.name}}</td>
      <td>{{order.price}}</td>
      <td>{{order.createDate | formatDate}}</td>
      <td>
        <span v-if="order.status === 0">未支付</span>
        <span v-if="order.status === 1">待发货</span>
        <span v-if="order.status === 2">已发货</span>
        <span v-if="order.status === 3">已签收</span>
        <span v-if="order.status === 4">已退款</span>
        <span v-if="order.status === 5">已完成</span>
      </td>
    </tr>
    </tbody>
  </table>

  <div v-if="order?.status === 0">
    <button>立即支付</button>
  </div>
</div>

<script>
  const id = g_getQueryString("id");
  const vm = new Vue({
    el: "#root",
    data: {
      goods: null,
      order: null,
    },
    methods: {
      loadData() {
        axios.get("/seckill/orders/" + id).then(resp => {
          console.log(resp);
          if (resp.data) {
            this.goods = resp.data.goods;
            this.order = resp.data.order;
          }
        }).catch(err => {
          const resp = err.response;
          if (resp.status === 404) {
            alert(resp.data.message)
            window.history.back();
          }
          g_ajaxError(err);
        });
      }
    },
    created: function () {
      this.loadData();
    },
    filters: {
      formatDate(time) {
        return g_formatDate(new Date(time), 'yyyy-MM-dd hh:mm:ss')
      }
    },
  })
</script>
</body>
</html>
